<div class="row">
  <div class="col-sm">
    <h1 class="alt-h0 text-white lh-condensed-ultra mb-3">Built for developers</h1>
    <p class="alt-lead mb-4">
      Ants' hole is a personal platform to record the learning process.<br />
      I will try to use Vue, React, Typescript and other technologies to build this website.<br/>
      Any Questions, Suggestions and Concerns, you can contact with me.
    </p>
  </div>
  <div class="col-sm">
    <div class="rounded-1 text-gray bg-gray-light py-4 px-4 px-md-3 px-lg-4">
      <form class="home-hero-signup js-signup-form" autocomplete="off" action="/logon" accept-charset="UTF-8" method="post">
        <div class="mb10">
          <label for="username">Username or email address</label>
          <input class="form-control form-control-lg" type="text" name="username" id="username" placeholder="username or email">
          <div class="invalid-feedback">username is required</div>
        </div>

        <div class="mb10">
          <label for="password">Password</label>
          <a class="label-link" href="/password_reset">Forgot password?</a>
          <input class="form-control form-control-lg" type="password" name="password" id="password" placeholder="Create a password">
          <small class="text-muted">Use at least one letter, one numeral, and seven characters.</small>
          <div class="invalid-feedback">Password is required</div>
        </div>
        <div class="mb10">
          <button class="btn btn-primary btn-large f4 btn-block" type="button" id="logon">Sign in</button>
          <p class="create-account-callout mt-3">
            New to Ants' Hole?
            <a data-ga-click="Sign in, switch to sign up" href="/join?source=login">Create an account</a>.
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

{{#extend "scripts"}}
  <script src="/javascripts/logon/index.js"></script>
{{/extend}}
